<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${alphotoName}</title>
<link rel="stylesheet" href="css/baguettebox.min.css">
<link rel="stylesheet" href="css/lrtk.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="css/zeroModal.css" rel="stylesheet">
<link rel="stylesheet" href="css/common.css" type="text/css" media="all" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/baguettebox.min.js"></script>
<script src="js/zeroModal.js"></script>
<link rel="stylesheet" href="css/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script> 
	<script>
	var w, h, className;
	function getSrceenWH() {
		w = $(window).width();
		h = $(window).height();
		$('#dialogBg').width(w).height(h);
	}

	window.onresize = function() {
		getSrceenWH();
	}
	$(window).resize();
	$(function() {
		getSrceenWH();

		//显示弹框
		$('#choose').click(
				function() {
					className = $(this).attr('class');
					$('#dialogBg').fadeIn(300);
					$('#dialog').removeAttr('class').addClass(
							'animated ' + className + '').fadeIn();
				});

		//关闭弹窗
		$('.claseDialogBtn').click(function() {
			$('#dialogBg').fadeOut(300, function() {
				$('#dialog').addClass('bounceOutUp').fadeOut();
			});
		});
	});
	
baguetteBox.run('.baguetteBoxOne', {
    animation: 'fadeIn',
});

/*
 * 上传文件
 */
function upload(){
	$("#msg").html("");
    var formData = new FormData($("#uploadfiles")[0]);
    var alphotoId = '${alphotoId}';
     $.ajax({
            type: "post",
            url: "photoController/upload?alphotoId="+alphotoId,
            dataType: "json",
            data: formData,
            /**   
             *必须false才会自动加上正确的Content-Type   
             */  
            contentType : false,
            /**   
             * 必须false才会避开jQuery对 formdata 的默认处理   
             * XMLHttpRequest会对 formdata 进行正确的处理   
             */
            processData : false,
            success: function(msg){//从后端返回数据进行处理
              	if(msg=='0'){
                  $("#msg").html("* 上传成功！");
                  $('#dialogBg').fadeOut(300, function() {
						$('#dialog').addClass('bounceOutUp').fadeOut();
					});
                  $("#ipt").html("");
					window.location.reload();
              }else if(msg=='1'){
            	  $("#msg").html("* 请选择图片进行上传！");
              }else if(msg=='-1'){
            	  $("#msg").html("* 照片已存在！");
              }else{
            	  $("#msg").html("* 上传失败！");
              }
            },
            error: function(err) {//提交出错
                $("#msg").html(JSON.stringify(err));//打出响应信息
              }
          });
}
function deletePhotos() {
    obj = document.getElementsByName("selct");
	var ids = '';
	for(k in obj){
		if(obj[k].checked)
		    ids += obj[k].value+',';
	}
	ids = ids.substring(0,ids.length-1);
	if(ids == ''){
        zeroModal.error('请选择要删除的照片！!');
	}else {
        zeroModal.confirm({
            content: '确定删除选中的照片？',
            contentDetail: '删除后将不再显示！',
            okFn: function() {
                $.ajax({
                    type:"post",
                    url:"photoController/deletePhoto",      // 这里是提交到什么地方的url
                    data:{photoIds:ids},            // 这里把表单里面的数据放在这里传到后台
                    dataType:"json",
                    success:function(date){
                        if(date=="0"){
                            zeroModal.success('删除成功!');
                            $("[name=selct]:checkbox").each(function(){
                                $(this).attr("checked",false);
                            });
                            setTimeout(function () {
                                window.location.reload();
                            },1000)
                        }else{
                            zeroModal.error('失败，未知错误！');
                        }
                    },
					/*  error:function(){
					 $("#msg").html("用户名或密码错误！");
					 }  */
                });
            },cancelFn: function() {

            }
        })
	}
}
//全选
    function selectAll(){
        $("[name=selct]:checkbox").each(function(){
            $(this).attr("checked",true);
        });
    };
//全不选
    function unSelect(){
        $("[name=selct]:checkbox").each(function(){
            $(this).attr("checked",false);
        });
    };
    //反选
		function reverse(){
            $("[name=selct]:checkbox").each(function(){ //遍历每一个复选框
                this.checked=!this.checked; //js方法	  //$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
            });
		}
</script>
</head>
<body>
	<div class="load" style="margin:20px auto auto 20px;">
		<h2 style="color:white;">操作&nbsp;:&nbsp;&nbsp;</h2>
	    <button id='choose' class="back"><font color="blue">上传照片</font></button>
		<button name="delete" value="删除" class="back" onclick="deletePhotos();"><font color="red">删除</font></button>
		<button id="selectAll" value="全选" class="back" onclick="selectAll()"><font color="">全选</font></button>
		<button id="unSelect" value="全不选" class="back" onclick="unSelect()"><font color="">全不选</font></button>
		<button id="reverse" value="反选" class="back" onclick="reverse()"><font color="">反选</font></button>
		<button name="back" value="返回" class="back" onclick="window.history.back();">返回</button>
	</div>
	<div class="baguetteBoxOne gallery">
		<c:forEach items="${photos}" var="photo" varStatus="photos">
			<a href="${photo.url}" title="${photo.name}">
				<img src="${photo.url}">
			</a>
			<input type="checkbox" name="selct" class="checkbox" value="${photo.id}">
		</c:forEach>
		<br>
	</div>

	<div id="dialogBg"></div>
	<div id="dialog" class="animated">
		<img class="dialogIco" width="500" height="500" src="images/ico.png"
			alt="" />
		<div class="dialogTop">
			<a href="javascript:;" class="claseDialogBtn">关闭</a>
		</div>
		<form enctype="multipart/form-data" method="post" id="uploadfiles">
			<ul class="editInfos">
			
				<li><label><font color="#ff0000">* </font>选择照片：</br> </br>
				<input type="file" id="ipt" name="ipt" required class="ipt" /></label></li>
				<li><font color="red"><span id='msg'></span></font></br> 
				<input type="button" value="上传" class="submitBtn"  onclick="upload()"/></li> 
			</ul>
		</form>
	</div>
	
</body>
</html>